<template>
	<view id="list">
		<u-sticky offset-top="0">
			<view class="list-search" v-if="show">
				<view class="list-input" v-if="!showNoise">
					<u-input v-model="queryParam.deviceName" clearable type="text" placeholder="输入扬尘站点名称" />
				</view>
				<view class="list-input" v-if="showNoise">
					<u-input v-model="queryParam.name" clearable type="text" placeholder="输入噪声站点名称"/>
				</view>
				<view class="list-btn">
					<u-button type="primary" text="查 询" @click="onSearch(type,queryParam)"></u-button>
				</view>
			</view>
			<view class="list-filter" v-if="show">
				<view :class="queryParam.areaName === '' ? 'filter-item' : 'filter-item filter-item-blue'" @click="toSelector">
					{{ queryParam.areaName === '' ? '所属区域' : queryParam.areaName }}
					<u-icon name="arrow-down" size="12"></u-icon>
				</view>
				<view :class="queryParam.projectType === '' ? 'filter-item' : 'filter-item filter-item-blue'" @click="showProjectType = true" v-if="!showNoise">
					{{ queryParam.projectType === '' ? '项目类型' : ProjectName }}
					<u-icon name="arrow-down" size="12"></u-icon>
				</view>
				<!-- <view class="filter-item" @click="onreset">
					<u-icon name="reload" size="16"></u-icon>
				</view> -->
			</view>

			<!-- <u-gap height="5" bgColor="#eee"></u-gap> -->
			<!-- 国控站点 -->
			<view class="state-controlled" v-if="!show">
				<view class="state-controlled-sites">
					<view class="site-tit">
						<text>站点排名</text>
						<view class="tit-time">
							<u-icon name="clock-fill" color="#999"></u-icon>
							<text>{{sateSites[0].tsPubtime}}</text>
						</view>
					</view>
					<view class="list-filter">
						<view class="filter-item" style="width: 60upx;">排名</view>
						<view class="filter-item" style="width: 300upx;">站点名称</view>
						<view class="filter-item" style="width: 80upx;" @click="checkAqiBtn">AQI
							<view class="item">
								<u-icon name="arrow-up-fill" :color=aqiUp?color:colorDefault size="8" @click="Sort('0','aqi asc')"></u-icon>
								<u-icon name="arrow-down-fill" :color=aqiDown?color:colorDefault size="8" @click="Sort('0','aqi desc')"></u-icon>
							</view>
						</view>
						<view class="filter-item" style="width: 100upx;" @click="checkPm10Btn">PM10
							<view class="item">
								<u-icon name="arrow-up-fill" :color=pm10Up?color:colorDefault size="8" @click="Sort('0','pm10 asc')"></u-icon>
								<u-icon name="arrow-down-fill" :color=pm10Down?color:colorDefault size="8" @click="Sort('0','pm10 desc')"></u-icon>
							</view>
						</view>
						<view class="filter-item" style="width: 80upx;" @click="checkPm25Btn">PM2.5
							<view class="item">
								<u-icon name="arrow-up-fill" :color=pm25Up?color:colorDefault size="8"  @click="Sort('0','pm25 asc')"></u-icon>
								<u-icon name="arrow-down-fill" :color=pm25Down?color:colorDefault size="8" @click="Sort('0','pm25 desc')"></u-icon>
							</view>
						</view>
					</view>
					<view v-for="(item,index) in sateSites" :key="item.id" class="container">
						<navigator :url="`./sitedetail?station=${item.station}&stationType=0&searchField=pm10&type=0`">
							<u-gap height="2" bgColor="#eee"></u-gap>
							<view class="list-show">
								<view class="content-item" style="width: 60upx;">
									<text style="display: block;">{{index + 1}}</text>
								</view>
								<view class="content-station" style="width: 260upx; text-align: left;">
									<text>{{item.station}}</text>
								</view>
								<view class="content-item" style="width: 80upx;">
									<view v-if="item.aqi" class="item-tag" :style="{backgroundColor:PMWarningBars['pm25'].filter(item.aqi)}">{{item.aqi}}
									</view>
									<view v-else class="item-tag" style="background-color: #C6C7CB;">-</view>
								</view>
								<view class="content-item" style="width: 80upx;">
									<view v-if="item.pm10" class="item-tag" :style="{backgroundColor:PMWarningBars['pm10'].filter(item.pm10)}">{{item.pm10}}
									</view>
									<view v-else class="item-tag" style="background-color: #C6C7CB;">-</view>
								</view>
								<view class="content-item" style="width: 80upx;">
									<view v-if="item.pm10" class="item-tag" :style="{backgroundColor:PMWarningBars['pm25'].filter(item.pm25)}">{{item.pm25}}
									</view>
									<view v-else class="item-tag" style="background-color: #C6C7CB;">-</view>
								</view>
							</view>
						</navigator>
					</view>
				</view>
				<view class="state-controlled-sites">
					<view class="site-tit">
						<text>站点对比</text>
						<text>24小时</text>
					</view>
					<sitelist-line></sitelist-line>
				</view>
			</view>
			<!-- 扬尘站点 -->
			<view class="list-filter" v-else>
				<view class="filter-item" style="width: 80upx;">排名</view>
				<view class="filter-item" style="width: 380upx;">站点名称</view>
				<view class="filter-item" v-if="!showNoise" style="width: 80upx;" @click="checkPm10BtnYC">PM10
					<view class="item">
						<u-icon name="arrow-up-fill" :color=pm10UpYC?color:colorDefault size="8" @click="Sort('1','pm10 asc')"></u-icon>
						<u-icon name="arrow-down-fill" :color=pm10DownYC?color:colorDefault size="8" @click="Sort('1','pm10 desc')"></u-icon>
					</view>
				</view>
				<view class="filter-item" v-if="!showNoise" style="width: 80upx;" @click="checkPm25BtnYC">PM2.5
					<view class="item">
						<u-icon name="arrow-up-fill" :color=pm25UpYC?color:colorDefault size="8"  @click="Sort('1','pm25 asc')"></u-icon>
						<u-icon name="arrow-down-fill" :color=pm25DownYC?color:colorDefault size="8" @click="Sort('1','pm25 desc')"></u-icon>
					</view>
				</view>
				<view class="filter-item" v-if="showNoise" style="width: 80upx;" @click="checkNoiseBtn">噪声
					<view class="item">
						<u-icon name="arrow-up-fill" :color=noiseUp?color:colorDefault size="8"  @click="Sort('2','noise asc')"></u-icon>
						<u-icon name="arrow-down-fill" :color=noiseDown?color:colorDefault size="8" @click="Sort('2','noise desc')"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>
		<view v-if="show" v-for="(item,index) in sateSites" :key="item.id" class="container">
			<navigator v-if="!showNoise" :url="`./sitedetail?type=1&deviceNo=${item.deviceNo}&searchField=pm10`">
				<u-gap height="3" bgColor="#eee"></u-gap>
				<view class="list-show">
					<view class="content-item" style="width: 80upx;text-align: center;">
						<text>{{index + 1}}</text>
					</view>
					<view class="content-item" style="width: 380upx;text-align: left;position: relative;left: -30upx;">
						<text>{{item.deviceName}}</text>
					</view>
					<view class="content-item" style="width: 80upx;">
						<view v-if="item.pm10" class="item-tag" :style="{backgroundColor:PMWarningBars['pm10'].filter(item.pm10)}">{{item.pm10}}
						</view>
						<view v-else class="item-tag" style="background-color: #C6C7CB;">-</view>
					</view>
					<view class="content-item" style="width: 80upx;">
						<view v-if="item.pm25" class="item-tag" :style="{backgroundColor:PMWarningBars['pm25'].filter(item.pm25)}">{{item.pm25}}
						</view>
						<view v-else class="item-tag" style="background-color: #C6C7CB;">-</view>
					</view>
				</view>
			</navigator>
			<navigator v-if="showNoise" :url="`./sitedetail?type=2&deviceNo=${item.deviceNo}&searchField=noise`">
				<u-gap height="3" bgColor="#eee"></u-gap>
				<view class="list-show">
					<view class="content-item" style="width: 80upx;text-align: center;">
						<text>{{index + 1}}</text>
					</view>
					<view class="content-item" style="width: 450upx;text-align: left;position: relative;left: -30upx;">
						<text>{{item.deviceName}}</text>
					</view>
					<view class="content-item" style="position: relative;left: -30upx;">
						<u-tag v-if="item.noise" :bgColor="NoiseWarningBars['noise'].filter(item.noise)"
							:borderColor="NoiseWarningBars['noise'].filter(item.noise)" :text="item.noise" size="mini">
						</u-tag>
						<u-tag v-else bgColor="#C6C7CB" borderColor="#C6C7CB" text="-" size="mini"></u-tag>
					</view>
				</view>
			</navigator>
		</view>
		<u-picker closeOnClickOverlay :show="showProjectType" :loading="cityLoading" :columns="typeColumns" ref="typePicker" @confirm="onTypeConfirm"
			@cancel="onTypeCancel" @close="onCloseType" keyName="title"></u-picker>
	</view>
</template>

<script>
	import {
		getChildren,
		getAreaList
	} from '@/api/global'
	import {
		getStateSite
	} from '@/api/site.js'
	import {
		getStateYangSite,
		getStateNoiseSite
	} from '@/api/site.js'
	import {
		AREA_ID
	} from '@/store/mutaction-types'
	import {
		PMWarningBars,
		NoiseWarningBars
	} from '@/utils/common.js'
	import config from '@/utils/defaultConfig'
	import sitelistLine from '@/packageC/site-list/components/sitelist-line.vue'
	export default {
		components: { 'sitelist-line': sitelistLine },
		data() {
			return {
				uTagCss: {
					display: 'block',
					color: '#000'
				},
				// 外部函数
				PMWarningBars,
				NoiseWarningBars,
				// 外部函数
				queryParam: {
					areaId: uni.getStorageSync(AREA_ID),
					areaName: '',
					pageNum: 1,
					projectType: '',
					deviceName: '',
					deviceTypes: 1,
					orderBy: 'pm10 desc',
					name:'',
					type:'',
					topName:''
				},
				color:'#48dbfb',
				colorDefault:'#999',
				aqiBtn:true,
				pm10Btn:true,
				pm25Btn:true,
				noiseBtn:true,
				pm10BtnYC:true,
				pm25BtnYC:true,
				aqiUp:false,
				aqiDown:false,
				pm10Up:false,
				pm10Down:true,
				pm25Up:false,
				pm25Down:false,
				pm10UpYC:false,
				pm10DownYC:true,
				pm25UpYC:false,
				pm25DownYC:false,
				noiseUp:false,
				noiseDown:true,
				show: false,
				showNoise: true,
				cityColumns: [
					[]
				],
				cityChildColumns: [
					[],
					[]
				],
				typeColumns: [
					config.projectType
				],
				areaId: uni.getStorageSync(AREA_ID),
				areaIds: '',
				sort: 'desc',
				showProjectType: false,
				ProjectName: '',
				pagenum: 1,
				pagesize: 20,
				totalpage: null,
				totalList:null,
				sateSites: [],
				type:''
			}
		},
		onLoad(option) {
			this.queryParam.areaName = ''
			this.type = option.type
			this.queryParam.type = option.type
			for (const k in option) {
				if (k === 'name') {
					this.queryParam['topName'] = option[k]
				} else {
					this.queryParam[k] = option[k]
				}
			}
			uni.setNavigationBarTitle({
				title: this.queryParam.topName
			})
			this.getAreaList()
			if (option.areaName === '') {
				this.getStateSiteAll(option.type, 'desc')
			} else {
				this.getlist(this.queryParam.type,this.queryParam)
			}

			this.getAreaList()
		},
		// 下拉刷新
		onPullDownRefresh () {
			this.queryParam.deviceName = ''
			this.queryParam.areaId = uni.getStorageSync(AREA_ID)
			this.queryParam.projectType = ''
			this.ProjectName = ''
			this.queryParam.areaName = ''
			this.pagenum = 1
			this.pagesize = 20
			this.getStateSiteAll(this.type, 'desc')
			uni.stopPullDownRefresh()
		},
		// 触底加载
		onReachBottom() {
			if (this.pagenum * this.pagesize >= this.totalList.length) {
				uni.showLoading({
					title: '加载中'
				});
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none',
					duration: 2000
				});
				uni.hideLoading()
			} else {
				if (this.pagenum <= this.pagenum - 1) {
					uni.showLoading({
						title: '加载中'
					});
					uni.hideLoading()
				} else {
					uni.showLoading({
						title: '加载中'
					});
					this.pagenum++
					let waitOrder = this.totalList.slice((this.pagenum-1)*this.pagesize,this.pagenum*this.pagesize)
					this.sateSites = this.sateSites.concat(waitOrder)
					uni.hideLoading()
				}
			}
		},
		methods: {
			getAreaList() {
				getAreaList().then(res => {
					this.areaList = res.data.data
					this.cityColumns[0] = this.areaList.slice(0,12)
					this.cityChildColumns[0] = this.areaList.slice(0,12)
					this.cityChildColumns[1] = this.areaList[0].children
				})
			},
			// onreset() {
			// 	this.queryParam.deviceName = ''
			// 	this.queryParam.areaId = uni.getStorageSync(AREA_ID)
			// 	this.queryParam.projectType = ''
			// 	this.ProjectName = ''
			// 	this.queryParam.areaName = ''
			// 	this.pagenum = 1
			// 	this.getlist(this.type,this.queryParam)
			// },
			toSelector () {
				const current = getCurrentPages()
				const url = current[current.length - 1].route
				this.queryParam.url = url
				let params = ''
				for (const k in this.queryParam) {
					params += `${k}=${this.queryParam[k]}&`
				}
				uni.navigateTo({
					url: '/packageB/selector/select-area?' + params
				})
			},
			onSearch(type,queryparams) {
				this.getlist(type,queryparams)
			},
			getStateSiteAll(type, sort) {
				const params = {}
				if (type === '0') {
					// aqi 倒序显示
					let query = ''
					if (sort === 'desc') {
					   query = 'pm10' + ' ' + sort
					} else {
						query = sort
					}
					getStateSite(query).then(res => {
						this.totalList = res.data.rows
						this.sateSites = this.totalList.slice(this.pagenum-1,this.pagesize)
						this.totalpage = Math.ceil(this.totalList.length/this.pagesize)
					})
				} else {
					uni.showLoading({
						title: '数据加载中',
						mask: true
					})
					this.show = true
					const app = this
					const areaIds = []
					let query = ''
					// pm10 倒序显示
					if (type === '1') {
						app.showNoise = false
						params['deviceTypes'] = '1'
						params['searchField'] = 'pm10'
						if (sort === 'desc') {
							 params['orderBy'] = 'pm10' + ' ' + sort
						} else {
							params['orderBy'] = sort
						}
						getChildren(app.areaId).then(areas => {
							const ids = areas.data.data
							for (const k in ids) {
								areaIds.push(ids[k].id)
							}
							app.areaIds = areaIds.join(',')
							for (const k in params) {
								query += `&${k}=${params[k]}`
							}
							getStateYangSite(app.areaIds, query).then(res => {
								if (res.data.code = 200) {
									app.totalList = res.data.rows.map(item=>{return {'deviceName':item.deviceName,'deviceNo':item.deviceNo,"pm10":item.pm10,"pm25":item.pm25}})
									app.sateSites = app.totalList.slice(app.pagenum-1,app.pagesize)
									app.totalpage = Math.ceil(app.totalList.length/app.pagesize)
								} else {
									uni.$u.toast(res.data.msg)
								}
							}).finally(() => {
								uni.hideLoading()
							})
						})
					} else if (type === '2') {
						// 噪声 倒序显示
						params['deviceTypes'] = '2'
						params['searchField'] = 'noise'
						params['searchScope'] = '2'
						if (sort === 'desc') {
							 params['orderBy'] = 'noise' + ' ' + sort
						} else {
							params['orderBy'] = sort
						}
						getChildren(app.areaId).then(areas => {
							const ids = areas.data.data
							for (const k in ids) {
								areaIds.push(ids[k].id)
							}
							this.areaIds = areaIds.join(',')
							for (const k in params) {
								query += `&${k}=${params[k]}`
							}
							getStateNoiseSite(this.areaIds, query).then(res => {
								if (res.data.code = 200) {
									app.totalList =  res.data.rows.map(item=>{return {'deviceName':item.station,'deviceNo':item.deviceNo,"noise":item.num}})
									app.sateSites = app.totalList.slice(app.pagenum-1,app.pagesize)
								    app.totalpage = Math.ceil(app.totalList.length/app.pagesize)
								} else {
									uni.$u.toast(res.data.msg)
								}
							}).finally(() => {
								uni.hideLoading()
							})
						})
					}
				}

			},
			onTypeConfirm(e) {
				this.queryParam.projectType = e.indexs[0]
				this.ProjectName = e.value[0].title
				this.showProjectType = false
				this.pagenum = 1
				this.getlist(this.type,this.queryParam)
			},
			onCloseType(e) {
				this.showProjectType = false
			},
			onTypeCancel() {
				this.showProjectType = false
			},
			
			// 查询
			getlist(type,queryParams) {
				if (type === '0') {
					getStateSite(queryParams.orderBy).then(res => {
						this.totalList = res.data.rows
						this.sateSites = this.totalList.slice(this.pagenum-1,this.pagesize)
						this.totalpage = Math.ceil(this.totalList.length/this.pagesize)
					})
				} else {
					uni.showLoading({
						title: '数据加载中',
						mask: true
					})
					this.show = true
					const app = this
					const areaIds = []
					let query = ''
					// pm10 倒序显示
					if (type === '1') {
						app.showNoise = false
						getChildren(queryParams.areaId).then(areas => {
							const ids = areas.data.data
							for (const k in ids) {
								areaIds.push(ids[k].id)
							}
							app.areaIds = areaIds.join(',')
							for (const k in queryParams) {
									query += `&${k}=${queryParams[k]}`
								}
								delete queryParams['topName']
								getStateYangSite(app.areaIds, query).then(res => {
									if (res.data.code = 200) {
										app.totalList = res.data.rows.map(item=>{return {'deviceName':item.deviceName,'deviceNo':item.deviceNo,"pm10":item.pm10,"pm25":item.pm25}})
										app.sateSites = app.totalList.slice(app.pagenum-1,app.pagesize)
										app.totalpage = Math.ceil(app.totalList.length/app.pagesize)
									} else {
										uni.$u.toast(res.data.msg)
									}
								}).finally(() => {
									uni.hideLoading()
								})
						})
					}  else if (type === '2') {
						const areaId = queryParams['areaId']
						// 噪声 倒序显示
						queryParams['deviceTypes'] = '2'
						queryParams['searchField'] = 'noise'
						queryParams['searchScope'] = '2'
						getChildren(areaId).then(areas => {
							delete queryParams['areaId']
							delete queryParams['projectType']
							delete queryParams['pageNum']
							delete queryParams['topName']
							delete queryParams['deviceName']
							const ids = areas.data.data
							for (const k in ids) {
								areaIds.push(ids[k].id)
							}
							app.areaIds = areaIds.join(',')
							for (const k in queryParams) {
								query += `&${k}=${queryParams[k]}`
							}
							getStateNoiseSite(app.areaIds, query).then(res => {
								if (res.data.code = 200) {
									if (queryParams.orderBy === 'noise asc') {
										app.totalList =  res.data.rows.map(item=>{return {'deviceName':item.station,'deviceNo':item.deviceNo,"noise":item.num}})
										function objectSort(property) {
										      return function (Obj1,Obj2) {
										            return Obj1[property]-Obj2[property]
										      }
										    }
										this.totalList.sort(objectSort('noise'))
										app.sateSites = app.totalList.slice(app.pagenum-1,app.pagesize)
										app.totalpage = Math.ceil(app.totalList.length/app.pagesize)
									} else {
										app.totalList =  res.data.rows.map(item=>{return {'deviceName':item.station,'deviceNo':item.deviceNo,"noise":item.num}})
										app.sateSites = app.totalList.slice(app.pagenum-1,app.pagesize)
										app.totalpage = Math.ceil(app.totalList.length/app.pagesize)
									}
									queryParams['areaId'] = areaId
								} else {
									uni.$u.toast(res.data.msg)
								}
							}).finally(() => {
								uni.hideLoading()
							})
					    })
					}
				}
			},
			// 排序
			Sort(type,sort) {
				if (type=== '0' && sort === 'aqi asc') {
					this.aqiUp = true
					this.aqiDown = false
					this.pm10Up = false
					this.pm10Down = false
					this.pm25Up = false
					this.pm25Down = false
				} else if (type=== '0' && sort === 'aqi desc') {
					this.aqiUp = false
					this.aqiDown = true
					this.pm10Up = false
					this.pm10Down = false
					this.pm25Up = false
					this.pm25Down = false
				} else if (type=== '0' && sort === 'pm10 asc') {
					this.aqiUp = false
					this.aqiDown = false
					this.pm10Up = true
					this.pm10Down = false
					this.pm25Up = false
					this.pm25Down = false
				} else if (type=== '0' && sort === 'pm10 desc') {
					this.aqiUp = false
					this.aqiDown = false
					this.pm10Up = false
					this.pm10Down = true
					this.pm25Up = false
					this.pm25Down = false
				} else if (type=== '0' && sort === 'pm25 asc') {
					this.aqiUp = false
					this.aqiDown = false
					this.pm10Up = false
					this.pm10Down = false
					this.pm25Up = true
					this.pm25Down = false
				} else if (type=== '0' && sort === 'pm25 desc') {
					this.aqiUp = false
					this.aqiDown = false
					this.pm10Up = false
					this.pm10Down = false
					this.pm25Up = false
					this.pm25Down = true
				}
				
				if (type=== '1' && sort === 'pm10 asc') {
					this.pm10UpYC = true
					this.pm10DownYC = false
					this.pm25UpYC = false
					this.pm25DownYC = false
					this.noiseUp = false
					this.noiseDown = false
				} else if (type=== '1' && sort === 'pm10 desc') {
					this.pm10UpYC = false
					this.pm10DownYC = true
					this.pm25UpYC = false
					this.pm25DownYC = false
				} else if (type=== '1' && sort === 'pm25 asc') {
					this.pm10UpYC = false
					this.pm10DownYC = false
					this.pm25UpYC = true
					this.pm25DownYC = false
				} else if (type=== '1' && sort === 'pm25 desc') {
					this.pm10UpYC = false
					this.pm10DownYC = false
					this.pm25UpYC = false
					this.pm25DownYC = true
				} 
				
				if (type=== '2' && sort === 'noise asc') {
					this.noiseUp = true
					this.noiseDown = false
				} else if (type=== '2' && sort === 'noise desc') {
					this.noiseUp = false
					this.noiseDown = true
				} 
				this.pagenum = 1
				this.queryParam.orderBy = sort
				this.getlist(type,this.queryParam)
			},
			checkAqiBtn() {
				if (!this.aqiBtn) {
					this.Sort('0','aqi asc')
					this.aqiBtn = true
				} else if (this.aqiBtn) {
					this.Sort('0','aqi desc')
					this.aqiBtn = false
				}
			},
			checkPm10Btn() {
				if (this.pm10Btn) {
				    this.Sort('0','pm10 asc')
					this.pm10Btn = false
				} else if (!this.pm10Btn) {
					this.Sort('0','pm10 desc')
					this.pm10Btn = true
				}
			},
			checkPm25Btn() {
				if (!this.pm25Btn) {
				    this.Sort('0','pm25 asc')
					this.pm25Btn = true
				} else if (this.pm25Btn) {
					this.Sort('0','pm25 desc')
					this.pm25Btn = false
				}
			},
			checkPm10BtnYC() {
				if (this.pm10BtnYC) {
				    this.Sort('1','pm10 asc')
					this.pm10BtnYC = false
				} else if (!this.pm10BtnYC) {
					this.Sort('1','pm10 desc')
					this.pm10BtnYC = true
				}
			},
			checkPm25BtnYC() {
				if (!this.pm25BtnYC) {
				    this.Sort('1','pm25 asc')
					this.pm25BtnYC = true
				} else if (this.pm25BtnYC) {
					this.Sort('1','pm25 desc')
					this.pm25BtnYC = false
				}
			},
			checkNoiseBtn() {
				if (this.noiseBtn) {
				    this.Sort('2','noise asc')
					this.noiseBtn = false
				} else if (!this.noiseBtn) {
					this.Sort('2','noise desc')
					this.noiseBtn = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	#list {
		font-size: 28upx;
		padding-bottom: 100upx;
		// height: 100vh;
		background-color: $uni-bg-color-grey2;

		.list-search {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;

			.list-input {
				width: 80%;
			}

			.list-btn {
				widht: 20%;
			}
		}

		.list-filter {
			display: flex;
			flex-direction: row;
			text-align: center;
			padding: 0 15upx 0 0;
			background: #f1f2f6;
			.filter-item {
				flex-grow: 1;
				padding: 20upx 0;
				display: flex;
				font-size: 24upx;
				justify-content: center;
				.item {
					margin-left: 4upx;
					/deep/ .u-icon {
						margin: 2upx 0;
					}
				}
			}
			.filter-item-blue {
				color: $uni-color-primary;
			}
		}

		.container {
			.content-item {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				.item-tag {
					color: #fff;
					text-align: center;
					font-size: 22upx;
					height: 40upx;
					line-height: 40upx;
					border-radius: 6upx;
					padding: 0 10upx;
				}
			}
		}

		.list-show {
			padding-top: 10upx;
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			display: flex;
			justify-content: space-around;
			// justify-content: space-between;
			background-color: #fff;

			.content-station {
				text-align: left;
			}

			.content-item {
				text-align: center;
			}
		}
	
		.content-item .u-tag__text {
			color: #333;
		}
		.u-tag-box .u-tag {
			display: block;
		}
		.state-controlled {
			overflow: hidden;
			.state-controlled-sites {
				background-color: #fff;
				margin: 20upx;
				border-radius: 10upx;
				padding: 20upx 10upx 30upx;
			}
			.site-tit {
				display: flex;
				justify-content: space-between;
				padding: 0 20upx;
				border-bottom: 1px solid #eee;
				line-height: 80upx;
				font-size: 32upx;
				text:first-child {
					font-weight: bold;
				}
				text:last-child {
					color: #999;
					font-size: 28upx;
				}
				.tit-time {
					display: flex;
					text {
						margin-left: 8upx;
					}
				}
			}
		}
	}
	.filter-item-icon .u-icon__icon {
		color: $uni-color-primary !important;
	}
	/deep/ .u-sticky, /deep/ .u-sticky__content {
		// position: initial !important;
	}
</style>
